import React from 'react';
import { map } from 'lodash';
import {
  ListGroup,
  Container,
  Card,
  Button,
  ButtonGroup
} from 'react-bootstrap';
import ZSpinner from '../ZSpinner';
import { useTracks } from '../../service';

export const TrackListPane = ({ tracks }) => (
  <ListGroup>
    {map(tracks, ({ id, session }) => (
      <ListGroup.Item action key={id}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between'
          }}
        >
          {session}

          <ButtonGroup>
            <Button variant="primary" href={`/tracks/${session}`}>
              重放
            </Button>
            <Button variant="secondary" href={`/tracks/${session}/video`}>
              查看视频
            </Button>
          </ButtonGroup>
        </div>
      </ListGroup.Item>
    ))}
  </ListGroup>
);

const TrackManagement = () => {
  const [loading, tracks] = useTracks();

  return (
    <ZSpinner loading={loading}>
      <Container style={{ marginTop: '1rem' }}>
        <Card>
          <Card.Body>
            <Card.Title>历史记录</Card.Title>
            <TrackListPane tracks={tracks} />
          </Card.Body>
        </Card>
      </Container>
    </ZSpinner>
  );
};

export default TrackManagement;
